import React, { Component } from 'react';
class Counter extends Component {
	//相同于data(数据) + state(状态)
	// constructor() {
	//     super()
	//     //在调用过父级状态后在把事件绑上this
	//     this.handleIncrement = this.handleIncrement.bind(this)
	// }

	/*
	// 受控组件没有本地的 state
	state = {
		count: this.props.counter.value,
		tags: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5']
	}
	*/

	styles = {
		fontSize: 10,
		fontWeight: 'bold',
	};

	//handleIncrement = product => {
	// console.log(product)
	// console.log('counter', this)
	// 告诉react你已经修改了数据, 让react更新视图,\
	// 最后会和react的state去合并
	/**
	 * angular 和 vue 会去自动检测dom更新并更新视图
	 */
	// this.setState({
	//     count: this.state.count + 1
	// })
	//}

	//ComponentWillMount      //crated
	//componentDidMount       //mounted  第一次组件渲染完成后
	//componentDidUpdate      //update
	//componentWillUnmount    //destory

	// 组件从dom中卸载时调用
	componentWillUnmount() {
		console.log('Counter - Unmount');
	}

	render() {
		console.log('props', this.props.counter);
		return (
			<React.Fragment>
				<div>
					{this.props.id}
					<span className={this.getBageClasses()}>{this.formatCount()}</span>
					<button className="btn btn-primary m-2" onClick={() => this.props.onIncrement(this.props.counter)}>
						+
					</button>
					<button
						className="btn btn-primary m-2"
						onClick={() => this.props.onDecrement(this.props.counter)}
						disabled={this.props.counter.value === 0 ? 'disabled' : ''}
					>
						-
					</button>
					<button className="btn btn-danger btn-sm m2" onClick={() => this.props.onDelete(this.props.counter.id)}>
						Delete
					</button>
				</div>
				{/* <ul>
                    {this.state.tags.map(tag => <li key={tag}>{tag}</li>)}
                </ul> */}

				{/* 如果长度为0为真, 就返回一个请创建一个列表提示 */}
				{/* <div>
                    {this.state.tags.length === 0 && '请创建一个列表!'}
                    {this.renderTags()}
                </div> */}
			</React.Fragment>
		);
	}
	//按钮点击事件

	// 列表渲染
	renderTags() {
		return (
			(this.props.tags.length !== 0 && (
				<ul>
					{this.state.tags.map((tag) => (
						<li key={tag}>{tag}</li>
					))}
				</ul>
			)) || <p>无列表</p>
		);
	}

	//state状态显示对应按钮状态
	getBageClasses() {
		let classes = 'badge m-2 badge-';
		classes += this.props.counter.value === 0 ? 'warning' : 'primary';
		return classes;
	}

	//按钮状态
	formatCount() {
		const { value } = this.props.counter;
		return value === 0 ? 'Zero' : value;
	}
}
export default Counter;
